<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../../style/common.css" />
    <script src="../../component/MyButton.js" type="module" defer></script>
    <script src="../../component/MyCard.js" type="module" defer></script>
    <script src="../../component/MyDialog.js" type="module" defer></script>
    <script src="../../component/MyHeader.js" type="module" defer></script>
  </head>
  <body>
    <!-- MyHeader -->
    <my-header title="这里写标题 也可以空着"></my-header>
    <!-- MyCard -->
    <my-card>
      <div slot="card-header">这里是头12312312部</div>
      <div slot="card-body">这里是内容</div>
    </my-card>
    <br />
    <!-- MyButton -->
    <my-button>这里是按钮</my-button>
    <!-- 一共两种大小 -->
    <my-button size="larger">这里是按钮</my-button>
    <!-- 另一种样式 -->
    <my-button type="primary">这里是按钮</my-button>
    <!-- 添加字体图标 -->
    <my-button icon="icon-zengjia">这里是按钮</my-button>
    <br />
    <!-- MyDialog -->
    <!-- visible 0为关闭 1为打开 -->
    <my-dialog id="my-dialog" visible="0" title="123">这里是内容</my-dialog>
    <button id="btn">对话框</button>
    <!-- 如果想自定义title样式 可以在my-dialog中添加slot="title"  -->
    <!-- <my-dialog id="my-dialog" visible="0">
      <h1 slot="title">123123</h1>
      这里是内容
    </my-dialog> -->
  </body>
  <script>
    const myDialog = document.getElementById("my-dialog");
    const quit = document.getElementById("quit");
    const btn = document.getElementById("btn");
    btn.addEventListener("click", () => {
      myDialog.setAttribute("visible", "1")
    });
    quit.addEventListener("click", () => {
      myDialog.setAttribute("visible", "0")
    });
  </script>
</html>
